stripshowfandomcom-20200213-history
Theming stripShow
stripShow's powerful organization and comic-entry features are only good for so much. You will also need a means of presenting your comic to the people; you need a theme. The stripShow Sandbox Theme Nearly all webcomics creators will want to have a custom theme for their site. You don't want to run the risk of having a site that looks identical to some other comic out there. But having a solid starting point is essential, which is why stripShow includes a theme framework. Whereas previous versions of stripShow included an example theme which was based on ComicPress, with a lot of my own additions, stripShow 2.0 includes a new theme framework called stripShow Sandbox. stripShow Sandbox is, as the name implies, based on Sandbox, one of the best-known theme frameworks for WordPress. stripShow Sandbox provides a robust PHP and HTML framework for your pages, which can then be fully styled using CSS. stripShow Sandbox can be found in your stripShow installation in the folder example-themes. In , I recommended that you copy this theme (renaming it in the process) into your themes folder. Keep the original around in case one of the changes you make messes things up beyond repair. Never be afraid to mess things up beyond repair, it's part of what makes web design fun. The stripShow Sandbox theme comes with several different layout options. Features of stripShow Sandbox * Dropdown navigation menu, linking to all WordPress pages, with support for parent and child pages * Context-aware classes added to body and post elements. * Four widget-ready areas -- two sidebars, a sidebar just for comics, and a header support area for things like advertisements. * Highly-configurable "action zones" that you can use to add content to your page without touching the core template files. * Works with stripShow's comic-orientation metadata to automatically format your page based on whether the comic is horizontal or vertical in form. This allows you to mix comic shapes in a single archive without sacrificing attractive layout for one or the other. stripShow Sandbox Options The stripShow Sandbox framework includes an options page (Appearance->stripShow Sandbox Options for setting some theme options without any customization of files. * Columns - stripShow Sandbox comes with a number of predefined column layouts, in one, two, and three-column flavors, with sidebars on the right, left, or both. Choose which one you prefer, or None if you prefer to ignore the built-in column options and create your own in CSS. * Suppress Index Rant - By default, stripShow puts the comic's rant on the index page, above your blog. If this option is selected, this will not be displayed. This allows you to use the Rant widget to put it wherever you like. * Suppress Blog Header - If you don't wish to have a header denoting where your blog begins on the index page, select this option. * Suppress Archive Comics - If you don't wish to have a header denoting where your blog begins on the index page, select this option. Creating Child Themes stripShow Sandbox includes some CSS presentation information to illustrate how the various theme elements can be styled. Rest assured: the template is not designed to be used on its own. Instead, the theme is designed to be extended through the use of child themes. Child themes are a feature available in WordPress 2.7 and later wherein a full theme can be used as a template (or "parent") to a stripped-down "child" theme that may contain as little as a single style.css. The child theme usually transforms the look of the parent theme using nothing more than CSS, but as of WordPress 2.7, child themes can also contain replacements for template files such as index.php. If WordPress doesn't find a needed file in the child theme's folder, it uses the one from the parent's. This enables child themes to be quite lightweight. One major advantage of using child themes is that, if you merely use CSS to style the existing parent, that parent can be updated without having to search for and merge changes into your theme. Of course, if you add your own PHP files into your child, any changes made to that file by updating the parent will not apply to your theme. To create a child theme, you simply create a new folder in wp-content/themes, just like any other theme. The only file you need to create within that folder is styles.css, but you'll almost certainly want to add your own graphics too, so create an images folder as well. stripShow Themes Layout Your style.css, at its most basic, contains the following style.css File for Child Theme /* THEME NAME: My Child Theme THEME URI: http://www.mygreatwebcomic.com DESCRIPTION: Child theme based on stripShow Sandbox VERSION: 1.0 AUTHOR: Joe Webcomic Creator AUTHOR URI: http://www.mygreatwebcomic.com TAGS: webcomics,stripShow, sandbox TEMPLATE: stripshow_sandbox */ @import url('../stripshow_sandbox/library/styles/reset.css'); @import url('../stripshow_sandbox/library/styles/layout.css'); @import url('../stripshow_sandbox/library/styles/menu.css'); @import url('../stripshow_sandbox/library/styles/icons.css'); @import url('../stripshow_sandbox/library/styles/typography.css'); @import url('../stripshow_sandbox/library/styles/colors.css'); @import url('../stripshow_sandbox/library/styles/widgets.css'); The only lines in the above example that are mandatory are THEME NAME and TEMPLATE. These lines tell WordPress what your theme is called, and which theme to use as a parent. The above example imports several CSS files directly from the stripshow_sandbox folder. These files are: reset.css * Resets all styles to a basic form, to compensate for the differences in browser rendering.layout.css * Specifies how the page is laid out, where objects go on the page, their margins and padding.superfish.css * Sets up the main drop-down menu (listing all WordPress pages) that appears at the top of your page. This menu uses the Superfish CSS menu system.icons.css * Creates icons for the bookmarks and comic navigation bar (and any other graphical elements that might show up in the parent theme), using graphics found in the images folder. You will probably want to create your own images rather than using the ones provided. Due to the way CSS works, even if you name your images identically to mine and put them in your child theme's images folder, they won't be used. Instead, copy the code from stripshow_sandbox/icons.css into your own style.css, rather than including it, if you want to change the icons. typography.css * Sets up the font faces and sizes for page elements, as well as styles for lists and other text elements.colors.css * Sets up the colors of page elements.widgets.css * Sets styles for sidebar widgets. Any styles set in any of these files can be overridden by putting your own CSS in your style.css file. These files are merely examples, and the lines including them can be removed at your option. Versions of stripShow prior to 2.1 included an additional CSS file, for laying out columns, in style.css. These lines are now deprecated, as the ability to choose your column layout is now found in stripShow Sandbox Options. If your child theme uses one of the default column layouts (like 3c-b.css, for example), you should remove that line from your style.css. PHP Files in Child Themes With WordPress 2.7 or later, you can also add your own PHP files (such as index.php) into your child theme, and those will override the corresponding files in the parent theme. I recommend against doing this unless absolutely necessary, however, as this may make it inconvenient to upgrade to a newer version of the parent theme when it is released. One exception is functions.php, which adds to, rather than replacing, the one in the parent. You can create your own functions in this file without having to worry about losing functionality that the parent theme provides. Using Action Zones Further adding to the customizability of stripShow Sandbox, the templates include several areas, called action zones, which you can use to add elements without touching the template files. These action zones are called: * before_header - Goes before the #header div begins. * header_support - Goes within the header, after the "branding" section (your site's name and description). * In addition to the action zone, the Header Support area also has a widget-ready sidebar built into it, intended for use with widgets such as John Bintz's Plugin Wonderful, which can create widgets based on adboxes you've set up at ProjectWonderful.com. * after_menu - Goes after the main menu found in the #access div ends. * after_header - Goes after the #header div ends. * do_comic - This action hook tells stripShow to show the comic. This action contains the following other actions: * before_comic - Goes right after the #comic-container div begins, before your comic is displayed. The stripShow Sandbox theme has a default action for this zone, called comic_header. * after_comic - Goes after your comic is displayed, before the comic sidebar.before_footer * Goes before the #footer div begins. * after_footer - Goes after the #footer div ends. * comic_archive - This action zone is used in the Comic Archive page template. If you make a page based on this template, you could customize the output by removing the default action (the comic_archive_table template tag with no arguments) by removing that default and adding your own. For example, if you wanted to group your archive by years, you could put the following in your cild theme's functions.php file: remove_action('comic_archive' , 'comic_archive_table'); add_action('comic_archive', 'my_comic_archive'); function my_comic_archive() { comic_archive_table($years=TRUE); } * In this way, you can have a custom archive page without having to touch the templates in your parent theme. * See the and template tags in Appendix A for tips on how to customize the output of your archive. These action zones use WordPress's built-in add_action command to insert your own content. For example, you could have an advertisement inserted into the header, by putting the following in your child theme's functions.php file: Action Zone Usage add_action('header_support', 'ad_space'); function ad_space() { echo ' '; } For more information on the use of actions in WordPress, see the WordPress Codex entry at http://codex.wordpress.org/Function_Reference/add_action. Features for Themes stripShow 2.0 introduces, at the plugin level, some features which any theme can take advantage of. Archive Page stripShow's example themes come with a special page template, comic-archive.php, that displays a complete listing of every comic in your archive. To use this template, simply create a new page in WordPress (Pages->'Add New'), give your page a name, and choose Comic Archive from the Template menu. You don't need to put any text in the body of the page; if you do, it will appear above the archive. By default, the archive page uses the comic_archive_table template tag, but the comic-archive.php file can be edited to change this. Orientation Webcomics come in all shapes. Some are horizontal in nature, some vertical. stripShow Sandbox can distingish between the two, and format the page accordingly. stripShow needs a little help to do this, however. The custom data field orientation controls this behavior. If this field is filled out with vertical, the comic is assumed to be taller than it is wide. Otherwise, it will be assumed to be wider than it is tall. stripShow's Add Comics page has a dropdown menu to select the comic's orientation when you post it. Widgets See Widgets.